<template>
  <div class="app">
    <!--
      class样式绑定的4种方式

        普通数组  :class="['class1','class2','class3']"
        三元数组  :class="['class1','class2',flag?'class3': '']"  flag 是data中定义好的布尔值
        数组对象  :class="['class1','class2',{'class3':flag}]"  flag 是data中定义好的布尔值,对象中的key是可以省略 引号
        普通对象  :class="{ class1: true, class2: true, class3: true }"  flag 是data中定义好的布尔值,对象中的key是可以省略 引号

     -->
    <p class="size color bg">传统的方式定义css样式</p>
    <p :class="['size', 'color', 'bg']">使用vue的方式绑定样式</p>
    <p :class="['size', 'color', flag ? 'bg' : '']">使用vue的方式绑定样式</p>
    <p :class="['size', 'color', { bg: flag }]">使用vue的方式绑定样式</p>
    <p :class="{ size: true, color: true, bg: true }">使用vue的方式绑定样式</p>
    <p :class="objStyle">使用vue的方式绑定样式</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: false,
      objStyle: {
        size: true,
        color: true,
        bg: true
      }
    }
  }
}
</script>
<style lang="scss">
.size {
  font-size: 50px;
}
.color {
  color: red;
}

.bg {
  background-color: pink;
}
</style>
